<template>
  <ul class="appList">
    <li
      class="appItem"
      v-for="item in myApply"
      :key="item.orderId"
      @click="goApplyDetail(item.orderStatus, item.orderId)"
    >
      <div class="main">
        <div class="icon">
          <img
            src="../../static/myApplicate/applicationIcon.png"
            alt=""
            class="img"
          />
        </div>
        <div class="appInfo">
          <div class="appTitle">科行e贷</div>
          <div class="orderNum">
            订单号：<span>{{ item.orderNo }}</span>
          </div>
          <div class="appTime">
            申请时间：<span>{{ item.orderApplyTime }}</span>
          </div>
        </div>
      </div>
      <div class="appState">
        <img
          class="appStateIcon"
          src="./img/app.png"
          alt=""
          v-if="item.orderStatus === '1'"
        />
        <img
          class="appStateIcon"
          src="./img/done.png"
          alt=""
          v-if="item.orderStatus === '2'"
        />
        <img
          class="appStateIcon"
          src="./img/done.png"
          alt=""
          v-if="item.orderStatus === '3'"
        />
        <img
          class="appStateIcon"
          src="./img/local.png"
          alt=""
          v-if="item.orderStatus === '4'"
        />
        <img
          class="appStateIcon"
          src="./img/local.png"
          alt=""
          v-if="item.orderStatus === '5'"
        />
        <img
          class="appStateIcon"
          src="./img/on.png"
          alt=""
          v-if="item.orderStatus === '6'"
        />
        <img
          class="appStateIcon"
          src="./img/over.png"
          alt=""
          v-if="item.orderStatus === '7'"
        />
        <img
          class="appStateIcon"
          src="./img/dones.png"
          alt=""
          v-if="item.orderStatus === '8'"
        />
        <img
          class="appStateIcon"
          src="./img/refuse.png"
          alt=""
          v-if="item.orderStatus === '9'"
        />
        <img
          class="appStateIcon"
          src="./img/local.png"
          alt=""
          v-if="item.orderStatus === '10'"
        />
        <img
          class="appStateIcon"
          src="./img/local.png"
          alt=""
          v-if="item.orderStatus === '11'"
        />
        <img
          class="appStateIcon"
          src="./img/refuse.png"
          alt=""
          v-if="item.orderStatus === '19'"
        />
        <img
          class="appStateIcon"
          src="./img/refuse.png"
          alt=""
          v-if="item.orderStatus === '29'"
        />
        <img
          class="appStateIcon"
          src="./img/refuse.png"
          alt=""
          v-if="item.orderStatus === '39'"
        />
        <img
          class="appStateIcon"
          src="./img/refuse.png"
          alt=""
          v-if="item.orderStatus === '49'"
        />
        <img
          class="appStateIcon"
          src="./img/dele.png"
          alt=""
          v-if="item.orderStatus === '99'"
        />
      </div>
    </li>
  </ul>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue";
import * as http from "../../utils/http";
const myApply = reactive([]);
onMounted(() => {
  http.myApply().then((res) => {
    if (res.code == 200) {
      myApply.push(...res.data);
    }
  });
});
const goApplyDetail = (orderStatus, orderId) => {
  if (
    orderStatus === "9" ||
    orderStatus === "9" ||
    orderStatus === "19" ||
    orderStatus === "29" ||
    orderStatus === "39" ||
    orderStatus === "49"
  ) {
    wx.showToast({
      title: "您的订单已被拒绝",
      mask: "true",
      icon: "none",
      duration: 1000,
    });
  } else if (orderStatus === "99") {
    wx.showToast({
      title: "您的订单已超时",
      mask: "true",
      icon: "none",
      duration: 1000,
    });
  } else {
    wx.navigateTo({
      url:
        "../../packageMine/applyDetail/applyDetail?value=" +
        JSON.stringify(orderId),
    });
  }
};
</script>

<style scoped lang="scss">
.img {
  width: 56rpx;
  height: 60rpx;
}
.appItem {
  height: 194rpx;
  background-color: #fff;
  border-radius: 12rpx;
  margin: 20rpx 24rpx;
  padding: 0 27rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  .main {
    display: flex;
    align-items: center;
    .icon {
      margin-right: 34rpx;
    }
    .appInfo {
      .appTitle {
        height: 48rpx;
        line-height: 48rpx;
        font-size: 34rpx;
        margin-bottom: 14rpx;
        font-weight: 600;
      }
      .orderNum,
      .appTime {
        height: 33rpx;
        line-height: 33rpx;
      }
    }
  }
  .appState {
    width: 139rpx;
    height: 48rpx;
    line-height: 48rpx;
    border-radius: 24rpx;
    text-align: center;
    font-size: 26rpx;
    .appStateIcon {
      width: 100%;
      height: 100%;
    }
  }
}
</style>
<style>
page {
  background-color: #f8f9fa;
}
</style>
